/*
 * @Author: hcluo
 * @Date: 2020-09-05 09:51:54
 * @LastEditors: hcluo
 * @LastEditTime: 2020-09-07 20:47:16
 * @Description: 
 */
import { useEffect, useState, useMemo, useRef, } from 'react';
import { useSize } from 'ahooks';

export interface OptionType {
  itemHeight: number | ((index: number) => number);
  overscan?: number;
}

export interface Option{
  viewX: number; // 可视区域x方向数据条数
  viewY: number; // 可视区域y方向数据条数
  itemWidth: number;// 单个元素的高
  itemHeight: number;// 单个元素的宽
  header?: any[]; // 表头
  fixed?: number; // 可视区域y方向固定数
  transposition?: boolean;//是否转置
}

interface ViewInfo extends Option{

  x: number; // 二维数组总宽度
  y: number; // 二维数组总高度
}

interface Offset {
  x: number;
  y: number;
}

export default <T = any>(list: T[], options: Option) => {

    const viewInfo:ViewInfo = useMemo(() => {
      const { viewX, viewY, itemWidth,itemHeight, header, fixed, transposition } = options;
      const x = (list[0] as any).length;
      const y = list.length;
      
      return {
        viewX:transposition?viewY:viewX,
        viewY:transposition?viewX:viewY,
        x:transposition?y:x,
        y:transposition?x:y,
        fixed,
        transposition
      };
    }, [list, options]);
  
  const [offset, setOffset]:[Offset,any] = useState({ x: 0, y: 0 })
  
  
  const [result, setResult] = useState({viewData:[], header:[]})
  
  useEffect(() => {

      let x = Math.round( offset.x / options.itemWidth )
      let y = Math.round(offset.y / options.itemHeight);

    if (viewInfo.transposition) [x,y] = [y,x]
    
      let viewData = [];
      let header = [];
      let fixedColumn = [];
    

        for (let vY = 0; vY < viewInfo.viewY; vY++) {
        // fixedColumn[vY] =list[y + vY][0];
        let xItem = [];

        let vX = 0;

        for (vX = 0; vX < viewInfo.fixed; vX++) {
          xItem[vX] = {
            data: list[y + vY][vX],
            x:  vX,
            y: y + vY
          }
        }

        for (; vX < viewInfo.viewX; vX++) {
          xItem[vX] = {
            data: list[y + vY][x + vX],
            x: x + vX,
            y: y + vY
          }
        }
        viewData[vY] = xItem;
      }
    
      if (options.header) {
        let viewLength = viewInfo.viewX
        let i = 0;

        for (; i < viewInfo.fixed; i++) {
          header[i] = {data:options.header[i],x:i } ;
        }

        for (; i < viewLength; i++) {
          header[i] = {data:options.header[x + i],x:x + i } ;
        }
    }

    setResult({ viewData,header})
    

  }, [offset, list, viewInfo, setResult])
  
    const containerRef = useRef(null);

  
    
  return {
    data:result,
    containerProps: {
      ref: (ele: any) => {
        containerRef.current = ele;
      },
      onScroll: (e: any) => {
        // e.preventDefault();
        setOffset({x:e.target.scrollLeft,y:e.target.scrollTop});
        console.log('%c 🍻  ', 'font-size:20px;background-color: #EA7E5C;color:#fff;', {x:e.target.scrollLeft,y:e.target.scrollTop},{x:~~(e.target.scrollLeft/options.itemWidth),y:~~(e.target.scrollTop/options.itemHeight)});
        // setOffset({x:~~(e.target.scrollLeft/options.itemHeight),y:~~(e.target.scrollTop/options.itemWidth)});
      },
      style: { overflow: 'scroll' as const ,position: 'relative' },
    },
    wrapperProps: {
      style: {
        width: options.itemWidth * viewInfo.x,
        height: options.itemHeight * viewInfo.y,
        // width: '100%',
        // height: totalHeight - offsetTop,
        // marginTop: offset.y,
        // marginLeft: offset.x,
      },
    },
  };
};